<template>
  <div style="padding-left: 50px">
    <div class="linlsit">
      <div class="labname">
        <span>图例名称：</span>
      </div>
      <div class="labinput">
        <el-input
          v-model="form.legendName"
          placeholder="请输入图例名称"
          size="small"
          style="width: 100% !important"
        ></el-input>
      </div>
    </div>
    <!-- <div class="linlsit">
      <div class="labname">
        <span>图例编号：</span>
      </div>
      <div class="labinput">
        <el-input
          v-model="form.legendCode"
          placeholder="请输入图例编号"
          size="small"
          style="width: 100%!important;"
        ></el-input>
      </div>
    </div>-->
    <div class="linlsit">
      <div class="labname">
        <span>图例类型：</span>
      </div>
      <div class="labiimg">
        <div
          :class="{
            'imgcine active': form.legendType === 'Basic',
            imgcine: form.legendType != 'Basic',
          }"
          @click="changeLegendType('Basic')"
        >
          <img src="../assets/img/基本.svg" alt />
          <span>基本</span>
        </div>
        <div
          :class="{
            'imgcine active': form.legendType === 'Single',
            imgcine: form.legendType != 'Single',
          }"
          @click="changeLegendType('Single')"
        >
          <img src="../assets/img/单值.svg" alt />
          <span>单值</span>
        </div>
        <div
          :class="{
            'imgcine active': form.legendType === 'Grading',
            imgcine: form.legendType != 'Grading',
          }"
          @click="changeLegendType('Grading')"
        >
          <img src="../assets/img/分级.svg" alt />
          <span>分级</span>
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="linlsit" v-if="form.legendType === 'Basic'">
      <div class="labname">
        <span>统一设置：</span>
      </div>
      <div class="labinput">
        <span style="font-size: 10px; color: #b8b8b8">元素用统一样式</span>
      </div>
    </div>
    <div class="linlsit" v-if="form.legendType === 'Single'">
      <div class="labname">
        <span>单值设置：</span>
      </div>
      <div class="labinput" style="width: 400px">
        <span style="font-size: 10px; color: #b8b8b8"
          >分类字段不支持字段属性分类计数均相同的字段</span
        >
      </div>
    </div>
    <div class="linlsit" v-if="form.legendType === 'Grading'">
      <div class="labname">
        <span>分级设置：</span>
      </div>
      <div class="labinput" style="width: 400px">
        <span style="font-size: 10px; color: #b8b8b8"
          >分级仅支持字段类型为“浮点型、整型”的字段</span
        >
      </div>
    </div>
    <div class="linlsit" v-if="form.legendType === 'Single'">
      <div class="labname"></div>
      <div>
        <div class="labname" style="width: 850px">
          分类字段：
          <el-select
            v-model="form.field"
            :disabled="!!legendId"
            clearable
            filterable
            placeholder="图层字段"
            size="small"
            style="width: 12% !important; margin: 0 5px"
          >
            <el-option
              v-for="item in layerFieldList"
              :key="item.name"
              :label="item.value"
              :value="item.name"
            ></el-option>
          </el-select>
          <el-select
            v-model="form.tableId"
            :disabled="!!legendId"
            clearable
            filterable
            placeholder="值表单"
            size="small"
            style="width: 12% !important; margin: 0 5px"
            @change="getTableFieldList"
          >
            <el-option
              v-for="item in tableList"
              :key="item.tableId"
              :label="item.tableName"
              :value="item.tableId"
            ></el-option>
          </el-select>
          <el-select
            v-model="form.valFieldId"
            :disabled="!!legendId"
            clearable
            filterable
            placeholder="关联字段"
            size="small"
            style="width: 12% !important; margin: 0 5px"
          >
            <el-option
              v-for="item in tableFieldList"
              :key="item.fieldId"
              :label="item.fieldName"
              :value="item.fieldId"
            ></el-option>
          </el-select>
          <el-select
            v-model="form.fieldId"
            :disabled="!!legendId"
            clearable
            filterable
            placeholder="值字段"
            size="small"
            style="width: 12% !important; margin: 0 5px"
            @change="getFieldPrivateList"
          >
            <el-option
              v-for="item in tableFieldListSelet"
              :key="item.fieldId"
              :label="item.fieldName"
              :value="item.fieldId"
            ></el-option>
          </el-select>
          <el-button
            type="primary"
            size="small"
            style="margin-left: 10px"
            @click="addlist"
            >添加字段值</el-button
          >
        </div>
      </div>
    </div>
    <div class="linlsit" v-if="form.legendType === 'Grading'">
      <div class="labname"></div>
      <div>
        <div class="labname" style="width: 850px">
          分类字段：

          <el-select
            v-model="form.field"
            :disabled="!!legendId"
            clearable
            filterable
            placeholder="图层字段"
            size="small"
            style="width: 12% !important; margin: 0 5px"
          >
            <el-option
              v-for="item in layerFieldList"
              :key="item.name"
              :label="item.value"
              :value="item.name"
            ></el-option>
          </el-select>
          <el-select
            v-model="form.tableId"
            :disabled="!!legendId"
            clearable
            filterable
            placeholder="值表单"
            size="small"
            style="width: 12% !important; margin: 0 5px"
            @change="getTableFieldList"
          >
            <el-option
              v-for="item in tableList"
              :key="item.tableId"
              :label="item.tableName"
              :value="item.tableId"
            ></el-option>
          </el-select>
          <el-select
            v-model="form.valFieldId"
            :disabled="!!legendId"
            clearable
            filterable
            placeholder="关联字段"
            size="small"
            style="width: 12% !important; margin: 0 5px"
          >
            <el-option
              v-for="item in tableFieldList"
              :key="item.fieldId"
              :label="item.fieldName"
              :value="item.fieldId"
            ></el-option>
          </el-select>
          <el-select
            v-model="form.fieldId"
            :disabled="!!legendId"
            clearable
            filterable
            placeholder="值字段"
            size="small"
            style="width: 12% !important; margin: 0 5px"
            @change="getFieldPrivateList"
          >
            <el-option
              v-for="item in tableListGrading"
              :key="item.fieldId"
              :label="item.fieldName"
              :value="item.fieldId"
            ></el-option>
          </el-select>
          <el-button
            type="primary"
            size="small"
            style="margin-left: 10px"
            @click="addlist"
            >添加分级区间</el-button
          >
        </div>
      </div>
    </div>
    <div class="linlsit" v-if="form.legendType === 'Basic'">
      <div class="labname"></div>
      <div class="stylecontaine">
        <el-divider content-position="center" class="tiplin"
          >样式设置</el-divider
        >
        <div class="stylerk">
          <div class="stylitem tinachon">
            <div>
              <span>填充颜色：</span>
            </div>
            <el-color-picker
              show-alpha
              v-model="form.legendSetting.fillColor"
              size="small"
            ></el-color-picker>
          </div>
          <div class="stylitem">
            <span>轮廓颜色：</span>
            <el-color-picker
              show-alpha
              v-model="form.legendSetting.borderColor"
              size="small"
            ></el-color-picker>
          </div>
          <div class="stylitem lunkuo">
            <span>轮廓宽度：</span>
            <el-input
              v-model="form.legendSetting.borderWidth"
              placeholder="px"
              size="small"
              style="width: 40% !important"
            ></el-input>
          </div>
        </div>
      </div>
    </div>
    <div class="linlsit" v-if="form.legendType === 'Single'">
      <div class="labname"></div>
      <div class="forcntaine">
        <div class="listeinr">
          <span style="margin-bottom: 10px; margin-top: -5px">字段值</span>
          <div
            v-for="(item, index) in form.legendSetting.valueList"
            style="margin-bottom: 11px"
            :key="index"
          >
            <i
              class="el-icon-delete"
              v-if="form.legendSetting.valueList.length > 1"
              @click="removeDomain(item)"
            ></i>
            <!-- <el-input
              v-model="item.value"
              placeholder="字段值"
              size="small"
              style="width: 60%!important;margin-left: 12%"
            ></el-input>-->

            <el-select
              v-model="item.value"
              clearable
              filterable
              placeholder="字段值"
              size="small"
              style="width: 60% !important; margin-left: 12%"
            >
              <el-option
                v-for="(v, i) in fieldPrivateList"
                :key="i"
                :label="v.dictName"
                :value="v.dictId"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="stylecontaine">
          <el-divider content-position="center" class="tiplin"
            >样式设置</el-divider
          >
          <div
            v-for="(item, index) in form.legendSetting.valueList"
            :key="index"
          >
            <div class="stylerk">
              <div class="stylitem tinachon">
                <div>
                  <span>填充颜色：</span>
                </div>
                <el-color-picker
                  show-alpha
                  v-model="item.fillColor"
                  size="small"
                ></el-color-picker>
              </div>
              <div class="stylitem">
                <span>轮廓颜色：</span>
                <el-color-picker
                  show-alpha
                  v-model="item.borderColor"
                  size="small"
                ></el-color-picker>
              </div>
              <div class="stylitem lunkuo">
                <span>轮廓宽度：</span>
                <el-input
                  v-model="item.borderWidth"
                  placeholder="px"
                  size="small"
                  style="width: 40% !important"
                ></el-input>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="linlsit" v-if="form.legendType === 'Grading'">
      <div class="labname"></div>
      <div class="forcntaine">
        <div class="listeinr" style="margin-right: 30px">
          <span style="margin-bottom: 10px; margin-top: -5px">分级区间</span>
          <div
            v-for="(item, index) in form.legendSetting.valueList"
            style="margin-bottom: 11px"
            :key="index"
          >
            <div style="display: flex; align-items: center">
              <i
                class="el-icon-delete"
                v-if="form.legendSetting.valueList.length > 1"
                @click="removeDomain(item)"
              ></i>
              <!-- <el-select v-model="item.operator1" placeholder="区间" size="small" style="width: 20%!important;">
              <el-option label="<" :value="3"></el-option>
              <el-option label="<=" :value="4"></el-option>
              <el-option label=">" :value="5"></el-option>
              <el-option label=">=" :value="6"></el-option>
              </el-select>-->
              <div v-if="item.filtype && item.filtype === 'number'">
                <el-input-number
                  v-model="item.valueLow"
                  :controls="false"
                  size="small"
                  :precision="item.precision"
                  placeholder="<="
                  :min="item.valueLows"
                  :max="item.valueHighs"
                  style="width: 45% !important"
                ></el-input-number>
                ~
                <el-input-number
                  v-model="item.valueHigh"
                  :controls="false"
                  size="small"
                  :precision="item.precision"
                  placeholder="<="
                  :min="item.valueLows"
                  :max="item.valueHighs"
                  style="width: 45% !important"
                ></el-input-number>
              </div>
              <div v-if="item.filtype && item.filtype === 'data'">
                <el-date-picker
                  v-model="item.valueLow"
                  type="datetime"
                  value-format="timestamp"
                    style="width: 45% !important"
                   size="small"
                  :format="item.format"
                  placeholder="<="
                >
                </el-date-picker>
                ~
                <el-date-picker
                  v-model="item.valueHigh"
                  type="datetime"
                    style="width: 45% !important"
                   size="small"
                   value-format="timestamp"
                  :format="item.format"
                  placeholder="<="
                >
                </el-date-picker>
              </div>
            </div>
          </div>
        </div>
        <div class="stylecontaine">
          <el-divider content-position="center" class="tiplin"
            >样式设置</el-divider
          >
          <div
            v-for="(item, index) in form.legendSetting.valueList"
            :key="index"
          >
            <div class="stylerk">
              <div class="stylitem tinachon">
                <div>
                  <span>填充颜色：</span>
                </div>
                <el-color-picker
                  show-alpha
                  v-model="item.fillColor"
                  size="small"
                ></el-color-picker>
              </div>
              <div class="stylitem">
                <span>轮廓颜色：</span>
                <el-color-picker
                  show-alpha
                  v-model="item.borderColor"
                  size="small"
                ></el-color-picker>
              </div>
              <div class="stylitem lunkuo">
                <span>轮廓宽度：</span>
                <el-input
                  v-model="item.borderWidth"
                  placeholder="px"
                  size="small"
                  style="width: 40% !important"
                ></el-input>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="linlsit">
      <div class="labname">
        <span>标注设置：</span>
      </div>
      <div class="labinput" style="width: 400px">
        <span style="font-size: 10px; color: #b8b8b8"
          >面中心点显示标注设置，如面上显示“面积、类型”等标注</span
        >
      </div>
    </div>

    <div class="linlsit">
      <div class="labname"></div>
      <div>
        <div class="labname" style="width: 400px">
          显示字段：
          <el-select
            v-model="form.calloutSetting.field"
            clearable
            filterable
            placeholder="请选择"
            size="small"
            style="width: 50% !important"
          >
            <el-option
              v-for="item in layerFieldList"
              :key="item.name"
              :label="item.value"
              :value="item.name"
            ></el-option>
          </el-select>
        </div>
      </div>
    </div>

    <div class="linlsit">
      <div class="labname"></div>
      <div>
        <div class="labname" style="width: 400px">
          显示颜色：
          <el-color-picker
            show-alpha
            v-model="form.calloutSetting.color"
            size="small"
          ></el-color-picker>
        </div>
      </div>
    </div>
    <div class="linlsit">
      <div class="labname"></div>
      <div>
        <div class="labname" style="width: 400px">
          显示字体：
          <el-select
            v-model="form.calloutSetting.fontFamily"
            clearable
            filterable
            placeholder="请选择"
            size="small"
            style="width: 50% !important"
          >
            <el-option
              v-for="item in fontFamilyList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="linlsit">
      <div class="labname"></div>
      <div>
        <div class="labname" style="width: 400px">
          字体大小：
          <el-input
            v-model="form.calloutSetting.fontSize"
            placeholder="px"
            size="small"
            style="width: 40% !important"
          ></el-input>
        </div>
      </div>
    </div>
    <div class="linlsit">
      <div class="labname"></div>
      <div>
        <div class="labname" style="width: 400px">
          显示类型：
          <el-select
            v-model="form.calloutSetting.type"
            placeholder="显示类型"
            size="small"
          >
            <el-option label="标牌" value="label"></el-option>
            <el-option label="文字" value="text"></el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="linlsit">
      <div class="labname"></div>
      <div>
        <div class="labname" style="width: 400px">
          背景颜色：
          <el-color-picker
            show-alpha
            v-model="form.calloutSetting.bgColor"
            size="small"
          ></el-color-picker>
        </div>
      </div>
    </div>
    <div class="linlsit">
      <div class="labname"></div>
      <div>
        <div class="labname" style="width: 400px">
          轮廓颜色：
          <el-color-picker
            show-alpha
            v-model="form.calloutSetting.borderColor"
            size="small"
          ></el-color-picker>
        </div>
      </div>
    </div>
    <div class="linlsit">
      <div class="labname"></div>
      <div>
        <div class="labname" style="width: 400px">
          轮廓宽度：
          <el-input
            v-model="form.calloutSetting.borderWidth"
            placeholder="px"
            size="small"
            style="width: 40% !important"
          ></el-input>
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <el-button type="primary" size="samll" @click="onSubmit">保存</el-button>
  </div>
</template>

<script>
import { api } from "../server/api";
export default {
  name: "addMap",
  props: ["ruleForm"],
  data() {
    return {
      layerFieldList: [],
      tableListGrading: [],
      tableList: [],
      tableFieldListSelet: [],
      tableFieldList: [],
      fieldPrivateList: [],

      valTableFieldList: [],

      lsylist: [],
      twolsylist: [],

      fontFamilyList: [
        "黑体",
        "宋体",
        "新宋体",
        "仿宋",
        "楷体",
        "仿宋_GB2312",
        "楷体_GB2312",
        "微软雅黑体",
      ],
      form: {
        mapId: "",
        layerCode: "",
        legendName: "",
        // legendCode: '',
        legendType: "Basic",
        field: "",
        tableId: "",
        fieldId: "",
        valTableId: "",
        valFieldId: "",
        legendSetting: {
          fillColor: "",
          borderColor: "",
          borderWidth: "",
          borderStyle: "line",
        },
        calloutSetting: {
          field: "",
          color: "",
          fontFamily: "",
          fontSize: "",
          type: "label",
          bgColor: "",
          borderColor: "",
          borderWidth: "",
        },
      },
      legendId: "",
    };
  },
  mounted() {},
  methods: {
    layerFields() {
      const par = {
        layerCode: this.ruleForm.layerEditCode,
      };
      api.layerFields(par).then((res) => {
        this.layerFieldList = res;
        console.log("图层列表", JSON.parse(JSON.stringify(res)));
      });
    },
    getTableList() {
      api.stdstDataTableLst({}).then((res) => {
        // this.tableList = res
        this.tableList = res.filter((v) => v.tableType === 0);
        console.log("表列表", JSON.parse(JSON.stringify(res)));

        if (this.legendId) {
          this.getLegendDetail();
        }
      });
    },
    filterFildlist(arr) {
      var fildType = ["SelectRadio", "SelectCheck", "RadioBox", "Checkbox"];
      const list = [];
      JSON.parse(arr).map((val) => {
        if (fildType.includes(val.fieldType)) {
          list.push(val);
        }
      });
      return list;
    },
    filterGrading(arr) {
      var fildType = ["InputDate", "InputNumber"];
      const list = [];
      JSON.parse(arr).map((val) => {
        if (fildType.includes(val.fieldType)) {
          list.push(val);
        }
      });
      return list;
    },
    getTableFieldList() {
      if (+this.form.tableId) {
        let table = this.tableList.find((v) => v.tableId == this.form.tableId);
        console.log("当前表", JSON.parse(JSON.stringify(table)));

        if (this.form.legendType === "Single") {
          api
            .stdappTableDetail({ tableId: this.form.tableId })
            .then((res) => {
              console.log(res);
              this.tableFieldList = res.fieldLst;
              this.tableFieldListSelet = this.filterFildlist(
                JSON.stringify(res.fieldLst)
              );
              console.log("tableFieldList", JSON.parse(JSON.stringify(res)));
              console.log(
                "tableFieldListSelet",
                this.filterFildlist(JSON.stringify(res.fieldLst))
              );
            })
            .catch((err) => {
              this.tableFieldList = [];
              this.tableFieldListSelet = [];
              this.form.fieldId = "";
            });
        } else if (this.form.legendType === "Grading") {
          api
            .stdappTableDetail({ tableId: this.form.tableId })
            .then((res) => {
              this.tableFieldList = res.fieldLst;
              this.tableListGrading = this.filterGrading(
                JSON.stringify(res.fieldLst)
              );
              console.log(
                "rangetableFieldList",
                JSON.parse(JSON.stringify(res.fieldLst))
              );
            })
            .catch((err) => {
              this.tableFieldList = [];
              this.form.fieldId = "";
            });
        }
      } else {
        this.tableFieldList = [];
        this.form.fieldId = "";
        this.fieldPrivateList = [];
      }
    },
    getValTableFieldList() {
      if (+this.form.valTableId) {
        let table = this.tableList.find(
          (v) => v.tableId == this.form.valTableId
        );
        console.log("当前val表", table);

        if (this.form.legendType === "Single") {
          api
            .farmOtherMapLegendSigFlds({ tableId: this.form.valTableId })
            .then((res) => {
              this.valTableFieldList = res;
              console.log("valTableFieldList", JSON.parse(JSON.stringify(res)));
            })
            .catch((err) => {
              this.valTableFieldList = [];
              this.form.valFieldId = "";
            });
        } else if (this.form.legendType === "Grading") {
          api
            .farmOtherMapLegendRangeFlds({ tableId: this.form.valTableId })
            .then((res) => {
              this.valTableFieldList = res;
              console.log(
                "rangetableFieldList",
                JSON.parse(JSON.stringify(res))
              );
            })
            .catch((err) => {
              this.valTableFieldList = [];
              this.form.valFieldId = "";
            });
        }
      } else {
        this.valTableFieldList = [];
        this.form.valFieldId = "";
      }
    },
    getFieldPrivateList() {
      this.fieldPrivateList = [];
      if (!this.form.fieldId) {
        return;
      }
      let field = this.tableFieldList.find(
        (v) => v.fieldId == this.form.fieldId
      );
      let fieldType = this.tableFieldList.find(
        (v) => v.fieldId == this.form.fieldId
      );
      console.log("值字段", JSON.parse(JSON.stringify(field)));
      if (field) {
        if (field.privateInfo) {
          let privateInfo = JSON.parse(field.privateInfo);
               console.log(privateInfo);
          if (this.form.legendType === "Single") {
            if (privateInfo.dictTblId) {
              //获取表内容
              api.dictList({ tableId: privateInfo.dictTblId }).then((res) => {
                console.log("字段值列表", res);
                this.fieldPrivateList = res;
              });
            } else if (privateInfo.valLst) {
              let valList=privateInfo.valLst
              if(valList.length){
                 this.fieldPrivateList = privateInfo.valLst.map((v, i) => {
                return {
                  dictId: i,
                  dictName: v,
                };
              });
              }
            }
          } else if (this.form.legendType === "Grading") {
            if (fieldType.fieldType === "InputNumber") {
              //类型是数字输入框
              console.log(privateInfo);
              if (privateInfo.maximum) {
                let item =
                  this.form.legendSetting.valueList &&
                  this.form.legendSetting.valueList[0];
                if (item && !item.valueHigh) {
                  item.format = "";
                  (item.filtype = "number"),
                    (item.valueHighs = privateInfo.maximum);
                  item.valueLows = privateInfo.minimum;
                  item.precision = privateInfo.precision;
                 
                }
              }
            } else {
              let item =
                this.form.legendSetting.valueList &&
                this.form.legendSetting.valueList[0];
                console.log(this.legendId)
                if(!this.legendId){
                  item.valueHigh = "";
              item.valueLow = "";
                }
            
              (item.filtype = "data"), (item.format = privateInfo.format);
              //类型是时间
              console.log(privateInfo);
            }
            let list=JSON.parse(JSON.stringify(this.form.legendSetting.valueList))
            const findeval= list.filter((x, index,self)=>index===0)  
           this.form.legendSetting.valueList=findeval
          }
        } else {
          this.$message("值字段privateInfo为空");
        }
      } else {
        this.fieldPrivateList = [];
      }
    },
    gedyaje(mapId, legendId) {
      if (legendId) {
        this.legendId = legendId;
      }
      this.form.mapId = mapId;
      this.form.layerCode = this.ruleForm.layerEditCode;

      if (!this.form.mapId) {
        this.$message("地图Id缺失");
        return;
      }
      if (!this.form.layerCode) {
        this.$message("地图未绑定图层");
        return;
      }

      console.log("this.ruleForm", this.ruleForm);
      this.layerFields();
      this.getTableList();
    },
    getLegendDetail() {
      console.log("legendId", this.legendId);
      api
        .farmOtherMapLegendDetail({ legendId: this.legendId })
        .then((res) => {
          console.log("legendDetail", JSON.parse(JSON.stringify(res)));
          let form = {
            legendId: res.legendId,
            mapId: res.mapId,
            layerCode: res.layerCode,
            legendName: res.legendName,
            legendType: ["Basic", "Single", "Grading"][res.legendType],

            field: res.field,
            tableId: res.tableId,
            fieldId: res.fieldId,
            valTableId: +res.valTableId,
            valFieldId: +res.valFieldId,
            legendSetting: {
              fillColor: "",
              borderColor: "",
              borderWidth: "",
              borderStyle: "line",
            },
            calloutSetting: {
              field: "",
              color: "",
              fontFamily: "",
              fontSize: "",
              type: "label",
              bgColor: "",
              borderColor: "",
              borderWidth: "",
            },
          };
          if (res.legendSetting) {
            form.legendSetting = JSON.parse(res.legendSetting);
          }
          if (res.legendConfig) {
            form.calloutSetting = JSON.parse(res.legendConfig);
          }
          this.form = form;

          this.getTableFieldList();
          // this.getValTableFieldList();
          setTimeout(() => {
            this.getFieldPrivateList();
          }, 2000);
        })
        .catch((err) => {});
    },
    changeLegendType(type) {
      console.log(type);
      if (this.legendId) {
        this.$message("不可编辑图例类型");
        return;
      }

      this.form.tableId = "";
      this.form.fieldId = "";
      this.form.valTableId = "";
      this.form.valFieldId = "";

      this.form.legendType = type;
      if (type === "Basic") {
        //基本
        this.form.legendSetting = {
          fillColor: "",
          borderColor: "",
          borderWidth: "",
          borderStyle: "line",
        };
      } else if (type === "Single") {
        //单值
        this.form.legendSetting = {
          field: "",
          valueList: [
            {
              value: "",
              fillColor: "",
              borderColor: "",
              borderWidth: "",
              borderStyle: "line",
            },
          ],
        };
      } else if (type === "Grading") {
        //分级
        this.form.legendSetting = {
          field: "",
          valueList: [
            {
              valueLow: "",
              valueLows: "",
              format: "",
              filtype: "",
              precision: 1,
              valueHigh: "",
               valueHighs: "",
              fillColor: "",
              borderColor: "",
              borderWidth: "",
              borderStyle: "line",
            },
          ],
        };
      }
    },
    removeDomain(item) {
      var index = this.form.legendSetting.valueList.indexOf(item);
      if (index !== -1) {
        this.form.legendSetting.valueList.splice(index, 1);
      }
    },
    addlist() {
      if (this.form.legendType === "Single") {
        this.form.legendSetting.valueList.push({
          value: "",
          fillColor: "",
          borderColor: "",
          borderWidth: "",
          borderStyle: "line",
        });
      } else if (this.form.legendType === "Grading") {
        let precision=this.form.legendSetting.valueList[0].precision;
         let filtype=this.form.legendSetting.valueList[0].filtype;
           let format=this.form.legendSetting.valueList[0].format;
        //分级
        let valueLows =
          this.form.legendSetting.valueList[0].valueLows;
           let valueHighs =
          this.form.legendSetting.valueList[0].valueHighs;
        this.form.legendSetting.valueList.push({
          valueLows,
          precision,
           valueLow:'',
          filtype,
             valueHigh:'',
          format,
          valueHighs,
          fillColor: "",
          borderColor: "",
          borderWidth: "",
          borderStyle: "line",
        });
      }
    },
    onSubmit() {
      let form = this.form;
      console.log("图例信息", JSON.parse(JSON.stringify(form)));

      let legendData = this.form;
      let calloutSetting = this.form.calloutSetting;
      let legendSetting = this.form.legendSetting;
     console.log(this.form)
      if (!legendData.legendName) {
        this.$message("请输入图例名称");
        return;
      }
      // if (!legendData.legendCode) {
      //   this.$message('请输入图例编号')
      //   return;
      // }
      if (!legendData.legendType) {
        this.$message("请选择图例类型");
        return;
      }

      if (legendData.legendType === "Basic") {
        if (!legendSetting.fillColor) {
          this.$message("请选择填充颜色");
          return;
        }
        if (!legendSetting.borderColor) {
          this.$message("请选择轮廓颜色");
          return;
        }
        if (!legendSetting.borderWidth) {
          this.$message("请选择轮廓宽度");
          return;
        }
      }
      if (
        legendData.legendType === "Single" ||
        legendData.legendType === "Grading"
      ) {
        if (!legendData.field) {
          this.$message("请选择分类字段");
          return;
        }
        if (!legendData.tableId) {
          this.$message("请选择关联表");
          return;
        }
        if (!legendData.fieldId) {
          this.$message("请选择关联字段");
          return;
        }
        // if (!legendData.valTableId) {
        //   this.$message('请选择值表')
        //   return
        // }
        if (!legendData.valFieldId) {
          this.$message("请选择值字段");
          return;
        }

        if (legendData.legendType === "Single") {
          if (legendData.legendSetting.valueList.some((v) => v.value === "")) {
            this.$message("请补全字段值");
            return;
          }
        }
        if (legendData.legendType === "Grading") {
          if (
            legendData.legendSetting.valueList.some(
              (v) => v.valueLow === "" || !v.valueHigh === ""
            )
          ) {
            this.$message("请补全分级区间");
            return;
          }
        }
      }

      if (calloutSetting.field) {
        //选择了标注字段
        if (!calloutSetting.color) {
          this.$message("请选择显示颜色");
          return;
        }
        if (!calloutSetting.fontFamily) {
          this.$message("请选择字体");
          return;
        }
        if (!calloutSetting.fontSize) {
          this.$message("请选择字体大小");
          return;
        }
        if (!calloutSetting.type) {
          this.$message("请选择显示类型");
          return;
        }
        if (calloutSetting.type === "label") {
          // if (!calloutSetting.bgColor) {
          //   this.$message('请选择背景颜色')
          //   return
          // }
          // if (!calloutSetting.borderColor) {
          //   this.$message('请选择边框颜色')
          //   return
          // }
          // if (!calloutSetting.borderWidth) {
          //   this.$message('请选择边框宽度')
          //   return
          // }
        }
      }
      let valueLst = [];

      if (legendData.legendType === "Basic") {
        valueLst = [
          {
            valConfig: JSON.stringify(legendSetting),
          },
        ];
      } else if (legendData.legendType === "Single") {
        legendSetting.valueList.forEach((v) => {
          let item = this.fieldPrivateList.find((val) => val.dictId == v.value);
          if (item) {
            v.valueName = item.dictName;
          }
        });
        valueLst = legendSetting.valueList.map((v) => {
          return {
            value1: v.value,
            valConfig: JSON.stringify(v),
          };
        });
      } else if (legendData.legendType === "Grading") {
        valueLst = legendSetting.valueList.map((v) => {
          return {
            operator1: 5,
            value1: v.filtype==='data'?v.valueLow:v.valueLow*Math.pow(10, v.precision),
            operator2: 4,
            value2: v.filtype==='data'?v.valueHigh:v.valueHigh*Math.pow(10, v.precision),
            valConfig: JSON.stringify(v),
          };
        });
      }
//obj.value.val =this.form[key] *Math.pow(10, JSON.parse(ite.privateInfo).precision);
      let postData = {
        mapId: legendData.mapId,
        layerCode: legendData.layerCode,
        legendName: legendData.legendName,
        // "legendCode": legendData.legendCode,  //图例名称
        legendType: ["Basic", "Single", "Grading"].indexOf(
          legendData.legendType
        ),
        field: legendData.field,
        tableId: +legendData.tableId || 0,
        fieldId: +legendData.fieldId || 0,
        // valTableId: +legendData.valTableId || 0,
        valFieldId: +legendData.valFieldId || 0,
        valueLst,
        legendSetting: JSON.stringify(legendSetting),
        legendConfig: JSON.stringify(calloutSetting),
      };
      console.log("postData", postData);
      console.log("postData", JSON.stringify(postData));

      if (legendData.legendId) {
        postData.legendId = legendData.legendId;
        this.farmOtherMapLegendUpdate(postData);
      } else {
        this.farmOtherMapLegendAdd(postData);
      }
    },
    farmOtherMapLegendAdd(par) {
      api.farmOtherMapLegendAdd(par).then((res) => {
        this.$message("操作成功");
        this.$emit("chanke");
      });
    },
    farmOtherMapLegendUpdate(par) {
      api.farmOtherMapLegendUpdate(par).then((res) => {
        this.$message("操作成功");
        this.$emit("chanke");
      });
    },
  },
};
</script>

<style scoped>

.linlsit {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.labname {
  width: 90px;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.labinput {
  width: 200px;
}

.labiimg {
  display: flex;
  align-items: center;
}

.imgcine {
  width: 60px;
  display: flex;
  flex-direction: column;
  height: 80px;
  justify-content: space-between;
  align-items: center;
  margin-right: 20px;
  font-size: 14px;
}

.active {
  color: rgba(42, 130, 228, 1);
}

.active img {
  border: 1px solid rgba(42, 130, 228, 1);
}

.stylecontaine {
  width: 400px;
  border-right: 1px solid #e0e3e7;
  border-left: 1px solid #e0e3e7;
}

.tiplin {
  margin-top: -0px;
}

.stylerk {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}

.stylitem {
  display: flex;
  align-items: center;
  font-size: 12px;
  width: 30%;
}

.tinachon {
  margin-left: -30px;
  height: 43px;
  display: flex;
  align-items: center;
  background-color: white;
}

.tinachon div {
  height: 32px;
  display: flex;
  background-color: white;
  align-items: center;
}

.lunkuo {
  margin-right: -40px;
  height: 43px;
  display: flex;
  align-items: center;
  background-color: white;
}
.forcntaine {
  display: flex;
  width: 1000px;
}
.listeinr {
  width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.listeinr .div {
  width: 100%;
  display: flex;
  align-items: center;
}
</style>
